<template>
  <!-- 柱状图 -->
  <div class="echart" ref="mychart4" id="mychart4" :style="{
    width: '100%',
    height: '100px',
    marginBottom: '5px',
    border: '1px solid #efefef',
    borderRadius: '5px',
  }" />
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'ProgessVue',
  data() {
    return {
      mychart: []
    }
  },
  mounted() {
    this.initEcharts4();
  },
  methods: {
    initEcharts4() {
      const mychart4 = echarts.init(this.$refs.mychart4)
      let option4 = {
        title: {
          text: '进度',
          left: 'center'
        },
        tooltip: {},
        xAxis: {
          min: 0,
          max: 100,
        },
        yAxis: {
          // 隐藏Y轴
          show: false,
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        series: [{
          // 图标形式-柱状图
          type: 'bar',
          data: [78],
          color: 'yellowgreen',
          barWidth: 15,
          showBackground: true,
          backgroundStyle: {
            color: '#eee'
          },
          // 文本标签
          label: {
            show: true,
            // 改变文本内容
            formatter: '|',
            // 文本标签位置调试
            position: 'right'
          }
        }],
      };
      mychart4.setOption(option4);
      window.addEventListener('resize', () => {
        mychart4.resize();
      });
    }

  }
}
</script>

<style>
.charts {
  width: 100%;
  height: 100%;
}
</style>